<script setup>

import {useRouter} from "vue-router";
import {getNewAPI} from "../../apis/product.js";
import {onMounted, reactive, ref} from "vue";
import {useScroll} from '@vueuse/core'
import {message} from "ant-design-vue";

const Router = useRouter()

//所有新品
const products = ref([])

// 查看详情
const checkDetail = (productId,sku) => {
  Router.push({
    path: '/detail',
    query: {
      productId,
      sku
    }
  })
}

// 获取新品数据
const getNewProducts = () => {
  let data = {
    pageNum: paginationConfig.pageNum,
    pageSize: paginationConfig.pageSize
  }
  getNewAPI(data).then((res) => {
    console.log("获取新品数据", res)
    if (res.code === '0000') {
      message.success(res.info)
      paginationConfig.total = res.data.total
      products.value = res.data.list
    } else {
      message.error(res.info)
    }
  })
}

const isLoading = ref(false)

// 分页器配置
const paginationConfig = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 100,
})

// 切换页面
const changePagination = (page, pageSize) => {
  console.log(page, pageSize)
  paginationConfig.pageNum = page
  paginationConfig.pageSize = pageSize

  getNewProducts()
}

onMounted(() => {
  getNewProducts()
})
</script>

<template>
  <div class="bg-white">
    <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
      <h2 class="text-4xl text-indigo-600">新品上市</h2>
      <a-spin :spinning="isLoading">
        <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
          <div @click="checkDetail(product.productId,product.sku)" v-for="product in products" :key="product.productId" class="group">
            <div
                class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
              <img src="https://www.apple.com.cn/v/iphone-15-pro/c/images/specs/hero_iphone_pro__c9kj8iil656q_large_2x.jpg"
                   :alt="product.productTitle"
                   class="h-full w-full object-cover object-center group-hover:opacity-75"/>
            </div>
            <h3 class="mt-4 text-sm text-gray-700">{{ product.productTitle }}
              <a-tag>{{ product.productSubTitle }}</a-tag>
              <a-tag :bordered="false">{{ product.productType }}</a-tag>
            </h3>

            <p class="mt-1 text-lg font-medium text-gray-900">¥{{ product.productPrice }}</p>
          </div>
        </div>
      </a-spin>
    </div>
    <a-pagination class="mb-2.5" @change="changePagination" v-model:current="paginationConfig.pageNum"
                  :pageSize="paginationConfig.pageSize" :total="paginationConfig.total"/>
  </div>
</template>

<style scoped>

</style>